<?php session_start(); ?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>楚瑞涛的博客管理后台-用户管理</title>
  <link rel="stylesheet" href=<?php echo HOME_CSS.'layui.css' ?> media="all">
  <script type="text/javascript" src=<?php echo HOME_JS.'jquery.min.js' ?> ></script>
  <script src=<?php echo HOME_JS.'layui.js' ?> ></script>
  <script type="text/javascript" src=<?php echo HOME_JS.'md5.js' ?>></script>
  <style>
    .info-title{
      text-align: center;
      font-weight: bold;
      padding-bottom: 20px;
    }
    .info-item{
      padding: 5px 10px;
    }
    .info-item>input,.info-item>select{
      width:100px;
    }
    .layui-form-item>.upload{
      width: 200px;
      border: 1px solid #ccc;
      margin: 0 auto;
      display:none;
      height:200px;
    }
    .layui-form-item>.upload>img{
      width: 200px;
      height:200px;
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">楚瑞涛博客管理后台</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src=<?php echo $_SESSION['m_portrait'] ?>  class="layui-nav-img" alt="头像">
          楚瑞涛
        </a>
        <dl class="layui-nav-child">
          <dd><a href=<?php echo HOME_PATH.'index.php/User/getManAll' ?>>基本资料</a></dd>
          <dd><a href=<?php echo HOME_PATH.'index.php/User/getManagerPass' ?>>修改密码</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a onclick="exit_login()" href="javascript:;">退出</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll"> 
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" >
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">用户管理
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd class="layui-this"><a href=<?php echo HOME_PATH.'index.php/User/getUserAll' ?>>用户管理</a></dd>
            <!-- <dd><a href="javascript:;">权限申请管理</a></dd> -->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">博客管理
            <span class="layui-nav-more"></span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href=<?php echo HOME_PATH.'index.php/Blog/getBlogAll' ?> >博客管理</a></dd>
            <dd><a href=<?php echo HOME_PATH.'index.php/Type/getTypeAll' ?> >类别管理</a></dd>
            <dd><a href=<?php echo HOME_PATH.'index.php/Target/getTargetAll' ?>>标签管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">评论管理</a>
            <dl class="layui-nav-child">
              <dd><a href=<?php echo HOME_PATH.'index.php/Comment/getCommentAll' ?> >评论管理</a></dd>
              <dd><a href=<?php echo HOME_PATH.'index.php/Reply/getReplyAll' ?> >追评管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">系统设置</a>
            <dl class="layui-nav-child">
              <dd><a href=<?php echo HOME_PATH.'index.php/User/getManAll' ?> >个人信息</a></dd>
              <dd><a href=<?php echo HOME_PATH.'index.php/User/getManagerPass' ?> >修改密码</a></dd>
            </dl>
        </li>
      </ul>
    </div>
  </div>
  <!-- setUser -->
  <div class="layui-form layui-form-pane" id="setUser" style="display:none">
    <h3 class="info-title">设置用户</h3>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-block">
          <input type="text" name="userName" required placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">发博客：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="sendBlog" lay-skin="switch" lay-text="允许|不允许">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">回消息：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="sendMess" lay-skin="switch" lay-text="允许|不允许">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="isFrozen" lay-skin="switch" lay-text="冻结|正常">
        </div>
      </div>
    </form>
  </div>
  <!-- 添加用户 -->
  <div class="layui-form layui-form-pane" id="addUser" style="display:none">
    <h3 class="info-title">添加用户</h3>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-block">
          <input type="text" name="name" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮&nbsp;&nbsp;&nbsp;箱：</label>
        <div class="layui-input-block">
          <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码：</label>
        <div class="layui-input-block">
          <input type="password" name="pass" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">头&nbsp;&nbsp;&nbsp;像：</label>
        <div class="layui-input-block">
        <button type="button" class="layui-btn" id="uploadImage">
          <i class="layui-icon">&#xe67c;</i><span>上传头像</span>
        </button>
        </div>
      </div>
      <div class="layui-form-item">
        <p class="upload">
          <img name ='portrait' src='' alt='用户头像'/>
        </p>
      </div>
    </form>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding:15px;">
      <form class="layui-form" action="">
        <div class="layui-form-item">搜索名称：
          <div class="layui-inline">
          <input type="text" id="userName" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-normal" onclick="return false;" data-type="reload" id="search" >搜索</button>
        <button class="layui-btn" onclick="return false;" id = 'add'>添加</button>
        <button class="layui-btn layui-btn-primary " onclick="return false;" id="refresh"  data-type="reload" >刷新</button>
        </div>
      </form>
      <table class="layui-hide" id="user_info" lay-filter="user_info"></table>
    </div>
  </div>

<script>
  //退出登陆
  function exit_login(){
    layer.alert('确定要退出嘛？',{
      closeBtn: 1    // 是否显示关闭按钮
      ,anim: 1 //动画类型
      ,btn: ['退出','取消'] //按钮
      ,icon: 3    // icon\
      ,title:"退出"
      ,yes:function(){
        $.ajax({
          url:'/blog_system/admin/index.php/Login/exitLogin',
          type:'POST',
          contentType: "application/x-www-form-urlencoded;charset=utf-8",
          success:function(result){
            console.log(result);
            if(result == 1){
              layer.msg('退出登陆成功',{icon: 6, time: 2000});
              $(":root").delay(2000).queue(function(){ window.location.href="/blog_system/admin/index.php"; });   //阿里云搜索跳转
            }else{
              layer.msg('退出登陆失败，请刷新后重试',{icon:5, time: 2000});
            }
          }
        });
      }
    });
  }
  layui.use(['table','element','form','upload'], function(){
    var table = layui.table;
    var element = layui.element;
    var form = layui.form;
    var upload = layui.upload;
    //加载表格
    table.render({      
      elem: '#user_info'
      ,url:'/blog_system/admin/index.php/User/getUsersJson'
      ,title: '用户数据表'
      ,toolbar: 'default'        //以后补充
      ,cellMinWidth: 120 //全局定义常规单元格的最小宽度
      ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'编号', type:'numbers', width:80}
          ,{field:'name', title:'用户名', align: 'center', sort: true}
          ,{field:'create_time', title:'创建时间', align: 'center', sort: true}
          ,{field:'last_time', title:'上次登陆时间', align: 'center', sort: true}
          ,{field:'is_blog', title:'发博客', align: 'center', width:100}
          ,{field:'is_reply', title:'回消息', align: 'center', width:100}
          ,{field:'state', title:'状态', align: 'center', sort: true, width:100}
          ,{field:'frozen', title:'冻结', align: 'center', sort: true, width:100}
          ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#userBar'}
      ]]
      ,height: 'full-220'   //高度自适应
      ,limit:15
      ,page: {
        layout: [ 'prev', 'page', 'next', 'count','skip'] //自定义分页布局
        ,curr: 1 
        ,first: true //显示首页
        ,last: true //显示尾页
      }
    });
    //根据条件查询表格数据重新加载
	  var $ = layui.$, active = {
		    reload: function(){
		    //获取用户名
		      var userName = $('#userName');
		      //执行重载
		      table.reload('user_info', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        },where: {//根据条件查询
		        	name:userName.val()
		        }
		      });
		   }
		};
	  //点击搜索按钮根据用户名称查询
	  $('#search').on('click',function(){
      if($('#userName') == ''){return;}
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    //刷新页面
    $("#refresh").on('click',function(){
      table.reload('user_info');
    });
     //监听头工具栏事件
     table.on('toolbar(user_info)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
      ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          addUser();
        break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行',{icon: 7, time: 2000});
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个',{icon: 7, time: 2000});
          } else {
            layer.open({
          title: '设置'  
          ,btn: ['修改','取消'] //按钮
          ,anim: 1 //动画类型 
          ,content:$('#setUser').html() 
          ,success: function(layero, index){
            layero.find('input[name="userName"]').val(data[0].name);
            if(data[0].frozen=='冻结')
              layero.find('input[name="isFrozen"]').prop("checked",true);
            if(data[0].is_blog=='允许')
              layero.find('input[name="sendBlog"]').prop("checked",true);
            if(data[0].is_reply=='允许')
              layero.find('input[name="sendMess"]').prop("checked",true);
            form.render();    //重新渲染 from 组件
          }
          ,yes:function(index,layero){
            uname = layero.find('input[name="userName"]').val().trim();
            var uPattern = /^[a-zA-Z0-9_-]{1,15}$/;
            if(!uPattern.test(uname)){
              alert('用户名不能包含特殊字符，且不能超过15位');
              return;
            }
            datainfo={
              name:uname,
              is_blog:layero.find('input[name="sendBlog"]').prop("checked")?1:0,
              is_reply:layero.find('input[name="sendMess"]').prop("checked")?1:0,
              frozen:layero.find('input[name="isFrozen"]').prop("checked")?0:1,
              id:data[0].id
            }
            $.ajax({
              url:'/blog_system/admin/index.php/User/editUser',
              type:'POST',
              data:datainfo,
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  if(data.code){
                    layer.msg('修改成功',{icon: 6, time: 2000});
                    table.reload('user_info');
                  }else{
                    layer.msg('修改失败，数据没有变化',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('修改失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
        }
        break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行',{icon: 7, time: 2000});
          }else if(data.length > 1 ){
            layer.msg('一次最多删除1个',{icon: 7, time: 2000});
          } else {
            layer.alert('真的删除选中的数据吗？<br>删除后数据将不可恢复！！',{
              closeBtn: 1    // 是否显示关闭按钮
              ,anim: 6 //动画类型
              ,btn: ['确定','取消'] //按钮
              ,icon: 3    // icon
              ,title:"删除"
              ,yes:function(index){
                var data = checkStatus.data;
                dataInfo = {
                  id : data[0].id
                } 
                $.ajax({
                  url:'/blog_system/admin/index.php/User/delUser',
                  type:'POST',
                  contentType: "application/x-www-form-urlencoded;charset=utf-8",
                  data:dataInfo,
                  success:function(result){
                    if(result){
                      var data = JSON.parse(result);
                      console.log(data.code);
                      if(data.code == 1){
                        layer.msg('删除成功',{icon: 6, time: 2000});
                        $(".layui-laypage-btn")[0].click();       //刷新当前页面数据
                      }else{
                        layer.msg('删除失败',{icon: 7, time: 2000});
                      }
                      return ; 
                    }
                    layer.msg('删除失败',{icon: 5, time: 2000}); 
                  }
                });
              }
            });
          }
        break;
      }
    });
    //监听工具条
    table.on('tool(user_info)', function(obj){
      var userInfo = obj.data;  
      console.log(userInfo);
      if(obj.event === 'detail'){   //查看按钮
        layer.open({
          title: '查看'
          ,anim: 1 //动画类型     
          ,content:
          '<div>'+
            '<h3 class="info-title">用户信息</h3>'+
            '<p class="info-item"><span>用&nbsp;&nbsp;户&nbsp;名：</span>'+userInfo.name+'</p>'+
            '<p class="info-item"><span>头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：</span><img style="width: 100px;" src='+userInfo.portrait+' /></p>'+
            '<p class="info-item"><span>创建时间：</span>'+userInfo.create_time+'</p>'+
            '<p class="info-item"><span>上次登陆：</span>'+userInfo.last_time+'</p>'+
            '<p class="info-item"><span>发&nbsp;&nbsp;博&nbsp;客：</span>'+userInfo.is_blog+'</p>'+
            '<p class="info-item"><span>回&nbsp;&nbsp;消&nbsp;息：</span>'+userInfo.is_reply+'</p>'+
            '<p class="info-item"><span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>'+userInfo.state+'</p>'+
            '<p class="info-item"><span>冻&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结：</span>'+userInfo.frozen+'</p>'+
          '</div>'
        });
        } else if(obj.event === 'set'){     //设置按钮
        console.log(userInfo);
        layer.open({
          title: '设置'  
          ,btn: ['修改','取消'] //按钮
          ,anim: 1 //动画类型 
          ,content:$('#setUser').html() 
          ,success: function(layero, index){
            layero.find('input[name="userName"]').val(userInfo.name);
            if(userInfo.frozen=='冻结')
              layero.find('input[name="isFrozen"]').prop("checked",true);
            if(userInfo.is_blog=='允许')
              layero.find('input[name="sendBlog"]').prop("checked",true);
            if(userInfo.is_reply=='允许')
              layero.find('input[name="sendMess"]').prop("checked",true);
            form.render();    //重新渲染 from 组件
          }
          ,yes:function(index,layero){
            uname = layero.find('input[name="userName"]').val().trim();
            var uPattern = /^[a-zA-Z0-9_-]{1,15}$/;
            if(!uPattern.test(uname)){
              alert('用户名不能包含特殊字符，且不能超过15位');
              return;
            }
            datainfo={
              name:uname,
              is_blog:layero.find('input[name="sendBlog"]').prop("checked")?1:0,
              is_reply:layero.find('input[name="sendMess"]').prop("checked")?1:0,
              frozen:layero.find('input[name="isFrozen"]').prop("checked")?0:1,
              id:userInfo.id
            }
            $.ajax({
              url:'/blog_system/admin/index.php/User/editUser',
              type:'POST',
              data:datainfo,
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  if(data.code){
                    layer.msg('修改成功',{icon: 6, time: 2000});
                    obj.update({      //更新表格数据
                      'name':datainfo.name,
                      'is_blog':datainfo.is_blog==1?'允许':'不允许',
                      'is_reply':datainfo.is_reply==1?'允许':'不允许',
                      'frozen':datainfo.frozen==1?'正常':'冻结',
                    });
                  }else{
                    layer.msg('修改失败，数据没有变化',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('修改失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
      }else if(obj.event === 'frozen'){         //冻结按钮
        layer.alert('确定要冻结这个用户嘛？',{
          // skin: 'layui-layer-rim' //样式类名 /layui-layer-molv  layui-layer-lan   layui-layer-rim
          closeBtn: 1    // 是否显示关闭按钮
          ,anim: 1 //动画类型
          ,btn: ['冻结','取消'] //按钮
          ,icon: 3    // icon
          ,title:"冻结"
          ,yes:function(index){
            if(userInfo.frozen == '冻结'){
              layer.msg('该用户已经冻结',{icon: 7, time: 2000});
              return;
            }
            $.ajax({
              url:'/blog_system/admin/index.php/User/frozen/id/'+userInfo.id,
              type:'POST',
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  if(data.code){
                    layer.msg('冻结成功',{icon: 6, time: 2000});
                    obj.update({      //更新表格数据
                      'frozen':'冻结'
                    });
                  }else{
                    layer.msg('该用户已经冻结',{icon: 7, time: 2000});
                  }
                  return ; 
                }
                layer.msg('冻结失败',{icon: 5, time: 2000}); 
              }
            });
          }
        });
      }
    });
    $('#add').click(function(){
      addUser();    //添加用户
    });
    function addUser(){   
      layer.open({
        title: '添加用户'  
        ,btn: ['添加','取消'] //按钮
        ,anim: 1 //动画类型 
        ,content:$('#addUser').html() 
        ,success: function(layero, index){
          form.render();    //重新渲染 from 组件
          upload.render({
            elem: layero.find('#uploadImage') //绑定元素
            ,url: '/blog_system/admin/view/action/upload.php?type=u_tx' //上传接口
            ,size: 2048 // 设置图片大小，单位 KB
            ,done: function(data){
                if(data.code == 200){
                  $("#uploadImage>span").html('重新上传');
                  layero.find('.upload').show()
                  layero.find('.upload>img').attr('src',data.file_path);
                }else {
                  layer.msg(data.msg,{icon: 5,anim:6, time: 2000}); 
                }
            }
            ,error: function(){
                layer.msg('服务器错误，请稍后重试',{icon: 5,anim:6, time: 2000}); 
            }
          });
        }
        ,yes:function(index,layero){
          var name = layero.find('input[name="name"]').val().trim();
          var email = layero.find('input[name="email"]').val().trim();
          var pass = layero.find('input[name="pass"]').val();
          var portrait = layero.find('img[name="portrait"]').attr('src');
          var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//用户名正则，4到16位（字母，数字，下划线，减号）
          var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//Email正则
          var pattern = /^[\w_-]{6,16}$/; //密码正则  字母数字下划线减号
          if(!uPattern.test(name)){
            alert('用户名输入4-16位，且不能包含特殊字符');
          }else if(!ePattern.test(email)){
            alert('请输入正确的邮箱');
          }else if(!pattern.test(pass)){
            alert('密码输入6-16位，且不能包含特殊字符');
          }else if(portrait == ''){
            alert('请上传头像');
          }else{
            datainfo={
              name:name,
              password:mad5(pass),
              email:email,
              portrait:portrait
            }
            $.ajax({
              url:'/blog_system/admin/index.php/User/addUser',
              type:'POST',
              data:datainfo,
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              success:function(result){
                if(result){
                  var data = JSON.parse(result);
                  if(data.code==1){
                    layer.msg('添加用户成功',{icon: 6, time: 2000});
                    $(".layui-laypage-btn")[0].click();       //刷新当前页面数据
                  }else if(data.code==2){
                    alert('添加用户失败，用户名已存在');
                  }else{
                    alert('添加失败，请刷新后重试');
                  }
                  return ; 
                }
                layer.msg('修改失败',{icon: 5, time: 2000}); 
              }
            });
          }
        }
      });
    }
  });
</script>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    &copy; 河南科技学院-三月小组
  </div>
</div>
</body>
</html>

<!-- userBar -->
<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="set">设置</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="frozen">冻结</a>
</script>



